<template>
	<view>
		<view class="title">
			<h1>食材分类</h1>
			<view class="categoricalBox">
				<text @click="move(-50)">分类</text>
				<text @click="move(50)">食材</text>
				<view class="box" :style="{left:size + '%'}">
					
				</view>
			</view>
			<view class="search">
				<image src="../../static/img/souuo.png"></image>
				<input type="text" placeholder="想吃什么搜这里，如麻婆豆腐" placeholder-style="font-size:22rpx">
			</view>
		</view>
		<!-- 下部内容 -->
		<Tab :msg='menu'></Tab>
	</view>
</template>

<script>
	import {getCategoricalDataApi} from "@/apis/index.js"
	import Tab from "@/components/menu-navigation/menu-navigation.vue"
	export default {
		
		data() {
			return {
				size:0,
				menu:[]
			};
		},
		components:{
			Tab
		},
		created() {
			this.getCategoricalData()
		},
		methods:{
			move(val){
				let view = uni.createSelectorQuery().in(this).select(".box");
				view.boundingClientRect(data => {
				  
				  this.size+=val
				  
				}).exec(()=>{
					
				});
			},
			getCategoricalData(){
				getCategoricalDataApi().then((res)=>{
					
					this.menu=res.message
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
.title{
	width: 100%;
	height: 354rpx;
	background: url('../../static/img/ditu.png');
	background-size: cover;
	padding: 112rpx 32rpx 0 32rpx;
	box-sizing: border-box;
	text-align: center;
	h1{
		color: white;
		margin-bottom: 48rpx;
	}
	.categoricalBox{
		width: 378rpx;
		height: 48rpx;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		border-radius: 28rpx;
		border: 1px solid white;
		margin: 0 auto;
		color: black;
		position: relative;
		text{
			z-index: 88;
		}
		.box{
			position: absolute;
			width: 188rpx;
			height: 48rpx;
			background-color: #fff;
			border-radius: 28rpx;
			// z-index: -1;
		}
	}
	.search{
		width: 692rpx;
		height: 60rpx;
		margin: 24rpx auto;
		background-color: #fff;
		// text-align: left;
		padding: 0 160rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		border-radius: 16rpx;
		image{
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
		input{
			text-align: left;
			width: 286rpx;
			height: 24rpx;
			
		}
	}
	
}
</style>
